﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="js/analytics.js"></script>
    <script type="text/javascript" src="js/core.js"></script>
    <script type="text/javascript" src="js/util.js"></script>
    <script type="text/javascript" src="js/dialog.js"></script>
    <script type="text/javascript" src="js/messages.js"></script>
    <script>
        /**
        *  Tracks a single button click.  You can use the _trackEvent command
        *  to track user interactions with different parts of your extension.
        */
        function trackButton(button_id) {
            _gaq.push(['_trackEvent', 'button' + button_id, 'clicked']);
        }
    </script>
    <style type="text/css">
        .center
        {
            width: 960px;
            margin-left: auto;
            margin-right: auto;
        }
        .dialog
        {
            width: 300px;
            height: 150px;
            -webkit-border-radius: 5px;
            -webkit-box-shadow: rgba(0, 0, 0, 0.5) 2px 3px 13px;
            position: absolute;
            display: none;
            background: #fff;
        }
        ul
        {
            list-style: none;
        }
        .nouse
        {
            background: url(images/all_001.png) no-repeat -21px -391px;
        }
        .use
        {
            background: url(images/all_001.png) no-repeat -67px -391px;
        }
        span.state
        {
            display: block;
            float: left;
            width: 14px;
            height: 14px;
            margin-right: 3px;
            margin-top: 1px;
        }
        .withvideo
        {
            background: url(images/ico_video3.gif) no-repeat 100% 50%;
            padding-right: 17px;
        }
        #header ul
        {
            list-style: none;
            padding: 0;
            margin: 0;
            margin-left: 60px;
        }
        #header li
        {
            float: left;
            border: 1px solid;
            border-bottom-width: 0;
            margin: 0 0.5em 0 0;
        }
        #header a
        {
            display: block;
            padding: 0 1em;
            text-decoration: none;
        }
        #header li.selected
        {
            position: relative;
            top: 1px;
            background: white;
        }
        .cur
        {
            border-top: 1px solid;
            clear: both;
            padding-left: 60px;
        }
        .cur select
        {
            width: 180px;
        }
        .hide
        {
            display: none;
        }
    </style>
</head>
<body>
    <div class="center">
    	<p>QuickSearch 2.0.4后，将使用<b>同时按ctrl键和鼠标右键</b>组合，来弹出自定义搜索引擎快捷菜单。</p>
    </div>
    <div class="center">
        <h3>
            谷歌浏览器中国版(QuickSearch)</h3>
        <span>作者:王祥 联系:wxnet2013@gmail.com </span><a href="http://code.google.com/p/searchforchrome/issues/list"
            target="_blank">提交bug</a>
    </div>
    <fieldset class="center">
        <legend>搜索</legend>
        <h5>
            选择搜索引擎:</h5>
        <div id="jstemplate" style="display: none;">
            <li><span class="$class state" id="$id" name="engine"></span>
                <label for="$id">
                    $name</label><input type="button" name="enginel" value="编辑" />
            </li>
        </div>
        <span class="state use"></span><span>当前可用</span><br />
        <span class="state nouse"></span><span>当前禁用</span>
        <ul id="engines">
        </ul>
        <input id="add" type="button" value="添加" /><a class="withvideo" target="_blank" href="http://www.cnblogs.com/wangxiang/articles/1647917.html">帮助</a><br />
        <h5>
            显示搜索结果:</h5>
        <select id="search_show">
        </select>
    </fieldset>
    <fieldset class="center">
        <legend>超级拖拽</legend>
        <div id="header">
            <ul>
                <li id="fordragimage" class="selected"><a href="#">图片</a></li>
                <li id="fordraglink"><a href="#">链接</a></li>
                <li id="fordragtext"><a href="#">选中的文本</a></li>
            </ul>
        </div>
        <div id="dragimage" class="cur">
            <p>
                <label for="imageright">
                    向右:</label><br />
                <select id="imageright">
                </select></p>
            <p>
                <label for="imageleft">
                    向左:</label><br />
                <select id="imageleft">
                </select></p>
            <p>
                <label for="imageup">
                    向上:</label><br />
                <select id="imageup">
                </select></p>
            <p>
                <label for="imagedown">
                    向下:</label><br />
                <select id="imagedown">
                </select></p>
        </div>
        <div id="draglink" style="display: none;">
            <p>
                <label for="linkright">
                    向右:</label><br />
                <select id="linkright">
                </select></p>
            <p>
                <label for="linkleft">
                    向左:</label><br />
                <select id="linkleft">
                </select></p>
            <p>
                <label for="linkup">
                    向上:</label><br />
                <select id="linkup">
                </select></p>
            <p>
                <label for="linkdown">
                    向下:</label><br />
                <select id="linkdown">
                </select></p>
        </div>
        <div id="dragtext" style="display: none;">
            <p>
                <label for="selectEngine">
                    拖拽选取文本:
                </label>
                <br />
                <select id="selectEngine">
                </select>
            </p>
            <hr />
            <p>
                <label for="textright">
                    向右:</label><br />
                <select id="textright">
                </select></p>
            <p>
                <label for="textleft">
                    向左:</label><br />
                <select id="textleft">
                </select></p>
            <p>
                <label for="textup">
                    向上:</label><br />
                <select id="textup">
                </select></p>
            <p>
                <label for="textdown">
                    向下:</label><br />
                <select id="textdown">
                </select></p>
        </div>
    </fieldset>
    <br />
    <div id="footer" class="center">
        <input id="close" type="button" value="关闭" />
    </div>
    <script type="text/javascript">
        $("close").onclick = function () {
            window.close();
        };

        var message = [
{ "id": 0, "orderid": 0, "name": "用谷歌搜索", "url": "http://www.google.com.hk/search?q={s}", "charset": "utf-8", "pic": "images/google.jpg", "isused": true },
{ "id": 1, "orderid": 1, "name": "用百度搜索", "url": "http://www.baidu.com/s?ie=utf-8&f=8&wd={s}", "charset": "utf-8", "pic": "images/baidu.jpg", "isused": false },
{ "id": 2, "orderid": 2, "name": "全能搜索", "url": "http://peizhi1.com/s.aspx?def=p1&s={s}&eng=my", "charset": "utf-8", "pic": "images/bing.jpg", "isused": true },
{ "id": 3, "orderid": 3, "name": "谷歌购物", "url": "http://www.google.cn/products?aq=f&q={s}", "charset": "utf-8", "pic": "images/shopping.jpg", "isused": true },
{ "id": 4, "orderid": 4, "name": "百度百科", "url": "http://baike.baidu.com/searchword/?pic=1&sug=1&word={s}", "charset": "gb2312", "pic": "images/wiki.jpg", "isused": true },
{ "id": 5, "orderid": 5, "name": "手气不错", "url": "http://www.google.cn/search?hl=zh-CN&source=hp&q={s}&btnI=%C2%A0%E6%89%8B%E6%B0%94%E4%B8%8D%E9%94%99%C2%A0&aq=f&oq=", "charset": "gb2312", "pic": "images/wiki.jpg", "isused": true },
{ "id": 7, "orderid": 7, "name": "英文翻译成中文", "url": "http://translate.google.cn/#en|zh-CN|{s}", "charset": "utf-8", "pic": "images/google.jpg", "isused": true }
];
        /**
        *预定义的搜索引擎
        */
        //var message = "[{\"id\":0,\"orderid\":0,\"name\":\"用谷歌搜索\",\"url\":\"http://www.google.com.hk/search?q={s}\",\"charset\":\"utf-8\",\"pic\":\"images/google.jpg\",\"isused\":true},{\"id\":1,\"orderid\":1,\"name\":\"用百度搜索\",\"url\":\"http://www.baidu.com/s?ie=utf-8&f=8&wd={s}\",\"charset\":\"utf-8\",\"pic\":\"images/baidu.jpg\",\"isused\":false},{\"id\":2,\"orderid\":2,\"name\":\"必应搜索\",\"url\":\"http://www.bing.com/search?q={s}\",\"charset\":\"utf-8\",\"pic\":\"images/bing.jpg\",\"isused\":false},{\"id\":3,\"orderid\":3,\"name\":\"谷歌购物\",\"url\":\"http://www.google.cn/products?aq=f&q={s}\",\"charset\":\"utf-8\",\"pic\":\"images/shopping.jpg\",\"isused\":true},{\"id\":4,\"orderid\":4,\"name\":\"百度百科\",\"url\":\"http://baike.baidu.com/searchword/?pic=1&sug=1&word={s}\",\"charset\":\"gb2312\",\"pic\":\"images/wiki.jpg\",\"isused\":true},{\"id\":5,\"orderid\":5,\"name\":\"手气不错\",\"url\":\"http://www.google.cn/search?hl=zh-CN&source=hp&q={s}&btnI=%C2%A0%E6%89%8B%E6%B0%94%E4%B8%8D%E9%94%99%C2%A0&aq=f&oq=\",\"charset\":\"gb2312\",\"pic\":\"images/wiki.jpg\",\"isused\":true}]";

        message = JSON.stringify(message);
        var engines_ = JSON.parse(message);
        //有时获取不到信息
        //var engines_ = JSON.parse(getMessage("engines"));

        //entity engine
        var engine = {};
        engine.id,
        engine.name = "",
        engine.url = "",
        engine.charset = "utf-8",
        engine.isused = true;

        //初始化数据
        if (localStorage["engines"] == "") localStorage["engines"] = JSON.stringify(engines_);
        var aEngines = localStorage["engines"] ? JSON.parse(localStorage["engines"]) : engines_;

        //对话框
        var dialogupdate, dialogadd; ;

        var engine = {
            addEngine: function (sName, sUrl, isChecked) {
                aEngines.push({
                    id: aEngines.length,
                    orderId: aEngines.length,
                    name: sName,
                    url: sUrl,
                    charset: (isChecked ? "gb2312" : "utf-8"),
                    isused: true
                });
                saveData("engines", JSON.stringify(aEngines));
                console.log(JSON.stringify(aEngines));
                alert("保存成功");
                dialogadd.close();
                this.refreshList();
            },
            cancelAddEngine: function () {
                dialogadd.close();
            },
            deleteEngine: function (id) {
                var index = 0;
                for (index; index < aEngines.length; index++) {
                    if (aEngines[index].id == id) break;
                }
                aEngines.splice(index, 1);
                saveData("engines", JSON.stringify(aEngines));
                console.log(aEngines);
                dialogupdate.close();
                this.refreshList();
            },
            updateEngine: function () {
                var eng = getEngineById(engine.id);
                eng.name = engine.name;
                eng.url = engine.url;
                eng.charset = engine.charset;
                eng.isused = engine.isused;

                console.log("更新搜索引擎:" + JSON.stringify(aEngines));
                //更新显示
                $("engine_" + engine.id).className = engine.isused ? "use" : "nouse";
                saveData("engines", JSON.stringify(aEngines));
                alert("更新成功！");
                this.refreshList();
                dialogupdate.close();
            },
            refreshList: function () {
                var stel = $("jstemplate").innerHTML;
                var alis = [];
                each(aEngines, function () {
                    var str = stel.replace(/\$id/g, "engine_" + this.id).replace(/\$name/, this.name);
                    //添加标注
                    str = this.isused ? str.replace(/\$class/, "use") : str.replace(/\$class/, "nouse");
                    alis.push(str);
                });
                $("engines").innerHTML = alis.join("");


                each(document.getElementsByName("enginel"), function () {
                    addEvent(this, "click", function (e) {
                        var span = tag("span", getParent(this, 1))[0];
                        engine.id = parseInt(span.id.replace(/engine_/, ""));
                        eng = getEngineById(engine.id);
                        engine.name = eng.name;
                        engine.url = eng.url;
                        engine.charset = eng.charset;
                        engine.isused = eng.isused;

                        var ele = e.target;
                        dialogupdate = new dialog();
                        dialogupdate.left(findPos(ele)[0] + ele.offsetWidth);
                        dialogupdate.top(findPos(ele)[1]);
                        dialogupdate.open("update.html");
                        e.stopPropagation();
                    });
                });
            }
        };


        /**
        *初始化列表
        */
        engine.refreshList();

        /**
        *添加搜索引擎
        */
        addEvent($("add"), "click", function (e) {
            trackButton("add");
            var ele = e.target;
            dialogadd = new dialog();
            dialogadd.left(findPos(ele)[0] + ele.offsetWidth / 2);
            dialogadd.top(findPos(ele)[1] + ele.offsetHeight);
            dialogadd.open("add.html");
            e.stopPropagation();
        });

        /**
        *初始化拖拽搜索列表
        */
        var oSelectEngines = $("selectEngine");
        each(aEngines, function () {
            oSelectEngines.options.add(new Option(this.name, this.id));
        });

        oSelectEngines.selectedIndex = getIndexByValue(oSelectEngines, getData("dragengine"));

        addEvent(oSelectEngines, "change", function () {
            saveData("dragengine", this.value);
        });


        var oSelectShowSearch = $("search_show");
        each(messages["engine"].option, function (i, v) {
            oSelectShowSearch.options.add(new Option(v, i));
        });




        oSelectShowSearch.selectedIndex = getIndexByValue(oSelectShowSearch, getData("showsearch") || "newwindow");

        addEvent(oSelectShowSearch, "change", function () {
            saveData("showsearch", this.value);
        });





        function getIndexByValue(ele, value) {
            var ret = 0;
            each(ele.options, function (i, x) {
                if (this.value == value) {
                    ret = i;
                    return false;
                }
            });
            return ret;
        }




        /**
        *超级拖拽
        */
        var oDragImages = document.getElementsByName("imageview");
        each(oDragImages, function () {
            addEvent(this, "click", function () {
                saveData("dragImageDisplayMode", this.value);
            });
        });

        //getElmentByValue(oDragImages, getData("dragImageDisplayMode")).checked = true;

        var oDragLinks = document.getElementsByName("linkview");
        each(oDragLinks, function () {
            addEvent(this, "click", function () {
                saveData("dragLinkDisplayMode", this.value);
            });
        });

        //getElmentByValue(oDragLinks, getData("dragLinkDisplayMode")).checked = true; ;

        function getElmentByValue(ele, value) {
            var ret = ele[0];
            each(ele, function () {
                if (this.value == value) {
                    ret = this;
                    return false;
                }
            });
            return ret;
        }


        var superDrag = {
            "imageright": "imageviewer",
            "imageleft": "imageviewer",
            "imageup": "imageviewer",
            "imagedown": "imageviewer",
            "linkright": "newwindow",
            "linkleft": "newwindow",
            "linkup": "newwindow",
            "linkdown": "newwindow",
            "textright": "newwindow",
            "textleft": "newwindow",
            "textup": "newwindow",
            "textdown": "newwindow"
        };

        //设置默认值
        if (!localStorage["superdrag"]) {
            saveData("superdrag", JSON.stringify(superDrag))
        } else {
            superDrag = JSON.parse(getData("superdrag"));
        }

        function loadOption(opt) {
            console.log(getData("superdrag"));
            //var drags = JSON.parse(getData("superdrag"));
            //加载列表
            var dragImageOption = messages[opt].option;
            each("right,left,up,down".split(","), function (i) {
                var ele = $(opt + this);

                each(dragImageOption, function (i, v) {
                    ele.options.add(new Option(v, i));
                });

                ele.selectedIndex = getIndexByValue(ele, superDrag[opt + this]);

                addEvent(ele, "change", saveDragOption);
            });
        }


        function saveDragOption() {
            superDrag[this.id] = this.value;
            saveData("superdrag", JSON.stringify(superDrag));
        }

        loadOption("image");
        loadOption("link");
        loadOption("text");

        each(document.querySelectorAll("#header li"), function (i) {
            addEvent(this, "click", function (e) {
                hide();

                document.querySelector(".selected").className = "";
                this.className = "selected";

                $(this.id.replace("for", "")).style.display = "block";
                addClass($(this.id.replace("for", "")), "cur");
                e.preventDefault();
            });
        });

        function hide() {
            each("dragimage dragtext draglink".split(" "), function () {
                var ele = $(this + "");
                ele.style.display = "none";
            });
        }


        /**
        *保存数据
        */
        function saveData(key, data) {
            console.log(data.toString());
            (data.toString() == "[]") ? localStorage[key] = "" : localStorage[key] = data;
        }

        function getData(key) {
            return localStorage[key];
        }

        /**计算位置*/
        function findPos(obj) {
            var curleft = curtop = 0;
            if (obj.offsetParent) {
                while (obj.offsetParent) {
                    curleft += obj.offsetLeft;
                    curtop += obj.offsetTop;
                    obj = obj.offsetParent;
                }
            }
            return [curleft, curtop];
        }

        function getEngineById(id) {
            for (var i = 0; i < aEngines.length; i++) {
                if (aEngines[i].id == id) return aEngines[i];
            }
        }
    </script>
    <div class="center">
        &copy;2010 <a href="http://wangxiang.cnblogs.com/" target="_blank">王祥</a>
    </div>
</body>
</html>
